<template>
  <div class="game-item-v2" :class="{'wulin-bg1':game.GAME_NAME == '股林大会'}">
    <div class="first-row">
      <div class='game-type' :style="{'background-color':gameType.bg}">{{gameType.text}}</div>
      <div class="name" v-text='game.GAME_NAME'></div>
    </div>
    <div class="second-row">
      <div class="award">
        <div class="unit">君元宝奖池<span class="num">{{game.GAME_AMOUNT | cutNumber}}</span></div>
      </div>
      <div class="attend">
        {{game.GAME_ATTEND_PERSON | cutNumber}}人已报名
      </div>
      <div class="lock" v-if="game.GAME_PWD">
        <div class="lock-wulin-img" v-if="game.GAME_NAME == '股林大会'"></div>
        <div class="lock-img" v-else><i class="iconfont icon-suo"></i></div>
        <div class="lock-text">需参赛口令</div>
      </div>
    </div>
    <div class="third-row">
      <div class="tip"><span v-text='status.text'></span><span class="clock" v-text='status.clock'></span></div>
      <div class="percent">
        <div class="progress">
          <div class="cover" v-bind:style="{ width: game.progress} "></div>
        </div>
        <div class="percent-num">{{game.progress}}</div>
      </div>
    </div>
    <div class="fourth-row">
      <div class="begin">{{game.BEGIN_DATE | formatDatePoint }}</div>
      <div class="end">{{game.END_DATE | formatDatePoint }}</div>
    </div>
  </div>
</template>

<style lang="less" rel="stylesheet/less" scoped>
  .game-item-v2 {
    padding: 23px 8% 11px;
    border-bottom: 1px solid #dbdbdb;
    .first-row {
      display: flex;
      .game-type {
        width: 47px;
        height: 22px;
        font-size: 12px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        position: absolute;
        left: 0;
      }
      .name {
        color: #565656;
        font-size: 1.7rem;
        flex: 1;
        text-align: center;
        padding: 0 25px;
      }
    }

    .second-row {
      margin: 5px 0 2px;
      display: flex;
      color: #999;
      font-size: 1.2rem;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      position: relative;
      .award {
        color: #2fafec;
        text-align: center;
        .num {
          font-size: 1.8rem;
          margin-left: 4px;
        }
      }
      .attend {
        color: #5E5E5E;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        overflow: hidden;
        font-size: 1.6rem;
      }
      .lock {
        position: absolute;
        right: 0;
        bottom: 0;
        display: flex;
        text-align: center;
        align-items: center;
        flex-direction: column;
        div {
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .lock-img {
          width: 33px;
          height: 33px;
          border-radius: 5px;
          background: #9EBEE3;
          margin-bottom: 3px;
          i {
            color: #fff;
            font-size: 19px;
            position: relative;
            bottom: 1px;
          }
        }
        .lock-text {
          font-size: 10px;
          color: #6D88A6;
        }
      }
    }
    .third-row {
      .tip {
        text-align: left;
        color: #FF8933;
        font-size: 12px;
        height: 12px;
        line-height: 12px;
        .clock {
          color: #ff3333;
        }
      }
      .percent {
        width: 100%;
        height: 12px;
        line-height: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .progress {
          height: 6px;
          border-radius: 7px;
          width: 90%;
          background-color: #e7e7e7;
          margin: 2px auto;
          .cover {
            background-color: #ff8933;
            height: 6px;
          }
        }
        .percent-num {
          width: 10%;
          font-size: 12px;
          color: #FF8933;
          text-align: right;
        }
      }
    }
    .fourth-row {
      height: 12px;
      line-height: 12px;
      margin-top: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .begin, .end {
        color: #999999;
        font-size: 12px;
      }
    }
  }
  .wulin-bg1{
    background-image: url('~assets/images/team/wulin/gldhgamebg1.jpg');
    background-repeat: no-repeat;
    background-size: cover;
  }
  .lock-wulin-img{
    width: 33px;
    height: 50px;
    background-image: url('~assets/images/team/wulin/lionlock.png');
    background-repeat: no-repeat;
    background-size: cover;
  }

</style>
<script>
  import cutNumber from 'filters/cutNumber'
  import formatDatePoint from 'filters/formatDatePoint'
  export default {
    props: {
      game: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    data(){
      return {
        timer: null,//开赛倒计时的timer，destory时要注销
        unitDay: 24 * 60 * 60 * 1000,
        unitHour: 60 * 60 * 1000,
        unitMin: 60 * 1000,
        unitSec: 1000,
        status: {
          text: '',
          clock: ''
        },
        gameType: {
          text: '',
          bg: '#FFF'
        }
      }
    },
    filters: {cutNumber, formatDatePoint},
    created(){
      this.formatData();
    },
    destoryed(){
      if(this.timer != null) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    methods: {
      formatData(){
        this.initType()
        this.initTimer();
        this.game.GAME_ATTEND_PERSON = parseInt(this.game.GAME_ATTEND_PERSON);
        this.game.GAME_MAX_LIMIT = parseInt(this.game.GAME_MAX_LIMIT);
      },
      /**
       * 初始化比赛类型及相关样式
       * @return {[type]} [description]
       */
      initType(){
        if (this.game.GAME_TYPE === 'NETDS' || this.game.GAME_TYPE === '') {
          this.gameType.text = '排名赛'
          this.gameType.bg = '#FF3333'
        } else if (this.game.GAME_TYPE === 'TDS') {
          this.gameType.text = '团队赛'
          this.gameType.bg = '#9d74c0'
        }else if (this.game.GAME_TYPE === 'QGS') {
          this.gameType.text = '全国赛'
          this.gameType.bg = '#663CEE'
        } else if (this.game.GAME_TYPE === 'JYS') {
          this.gameType.text = '精英赛'
          this.gameType.bg = '#663CEE'
        } else if (this.game.GAME_TYPE === 'CLS') {
          this.gameType.text = '超级赛'
          this.gameType.bg = '#663CEE'
        } else if (Number(this.game.GAME_KIND) === 1) {
          this.gameType.text = '官方'
          this.gameType.bg = '#ff8933'
        }
      },
      /**
       * 初始化比赛时间、报名进度条相关数据，包括报名倒计时
       * @return {[type]} [description]
       */
      initTimer(){
        //第3行的比赛状态提示，例如比赛已结束、报名倒计时
        switch (this.game.GAME_STEP) {
          case '0'://报名未开始
            this.status.text = '未开赛';
            this.game.progress = '0%';
            this.countDown()
            break;
          case '1'://报名中
            this.status.text = '报名倒计时：';
            this.game.progress = '0%';
            break;
          case '2':
            this.status.text = '报名已结束';
            this.game.progress = '0%';
            break;
          case '3':
            this.status.text = '进行中';
            this.countProgress();
            break;
          case '4':
            this.status.text = '已结束';
            this.game.progress = '100%';
            break;
          case '5':
            this.status.text = '比赛失效';
            this.game.progress = '0%';
            break;
        }
      },
      /**
       * 比赛进度
       */
      countProgress(){
        let BEGIN_DATE = new Date(this.transferFormatDate(this.game.BEGIN_DATE, '/'));//使用／作为分割符，是因为iOS兼容的原因
        let END_DATE = new Date(this.transferFormatDate(this.game.END_DATE, '/'));//使用／作为分割符，是因为iOS兼容的原因
        END_DATE.setHours(23, 59, 59, 999);
        var curDate = new Date();
        var totalTime = END_DATE.getTime() - BEGIN_DATE.getTime();
        var remaining = END_DATE.getTime() - curDate.getTime()
        if (totalTime <= 0) {
          this.status = {text: '', clock: ''};
          console.warn('END_DATE - BEGIN_DATE = ' + totalTime + 'ms');
          return;
        }

        if (remaining < 0 || remaining > totalTime) {
          console.warn('The remaining is error while GAME_STEP = 3, totalTime = ' + totalTime + ', remaining time = ' + remaining + ', gameId=' + this.game.GAME_ID);
          return;
        } else {
          this.game.progress = ((remaining / totalTime) * 100).toFixed(0) + '%';
        }
      },
      /**
       * 倒计时
       */
      countDown(){
        let BEGIN_DATE = new Date(this.transferFormatDate(this.game.BEGIN_DATE, '/'));//使用／作为分割符，是因为iOS兼容的原因
        BEGIN_DATE.setHours(0, 0, 0, 0);
        var curDate = new Date();
        var remaining = BEGIN_DATE.getTime() - curDate.getTime();
        if(remaining < 0) {
          this.status = {text:'', clock: ''};
//          console.warn('The remaining time is leswer than 0 while GAME_STEP = 0, remaining time = '+ remaining +', gameId='+ this.game.GAME_ID);
          return;
        }else {
          this.timer = setInterval(() => {
            if(remaining <= 0) {
              this.destoryTimer();
              this.countProgress();
            } else {
              this.status = {text:'开赛倒计时:', clock: this.transferTime(remaining)};
              remaining -= 1000;
            }
          }, 1000);
        }
      },
      destoryTimer(){
        clearInterval(this.timer);
        this.timer = null;
      },
      /**
       * 将time转换为hh:mm:ss
       * @param  {Number} time 需要转换的时间，单位为ms
       * @return {String}      hh:mm:ss
       */
      transferTime(time){
        if (time > this.unitDay) {
          return "还剩" + Math.ceil(time / this.unitDay) + "天";
        } else {
          let hours = parseInt(time / this.unitHour);
          let min = parseInt((time % this.unitHour) / this.unitMin);
          let sec = parseInt((time - hours * this.unitHour - min * this.unitMin) / this.unitSec);
          hours = hours < 10 ? '0' + hours : hours;
          min = min < 10 ? '0' + min : min;
          sec = sec < 10 ? '0' + sec : sec;
          return hours + ':' + min + ':' + sec;
        }
      },
      /**
       *转换日期格式，服务器给的格式是20160909，转为2016.09.09
       * @param str
       * @param separator
       */
      transferFormatDate (str, separator) {
        if (str == undefined || str == null || str.length < 8) return '0000' + separator + '00' + separator + '00';
        let year = str.substring(0, 4);
        let month = str.substring(4, 6);
        if (month.length <= 0) month = '01';
        let day = str.substring(6, 8);
        if (day.length <= 0) day = '01';
        return year + separator + month + separator + day;
      }
    }
  }
</script>
